phosphor-domutil

phosphor-domutil

Utilities for working with the DOM.

API Docs

Package Install

Prerequisites

• node

npm install --save phosphor-domutil

Source Build

Prerequisites

• git
• node

git clone https://github.com/phosphorjs/phosphor-domutil.git
cd phosphor-domutil
npm install

Rebuild

npm run clean
npm run build

Run Tests

Follow the source build instructions first.

# run tests in Firefox
npm test

# run tests in Chrome
npm run test:chrome

# run tests in IE
npm run test:ie

Build Docs

Follow the source build instructions first.

npm run docs

Navigate to docs/index.html.

Supported Runtimes

The runtime versions which are currently known to work are listed below. Earlier versions may also work, but come with no guarantees.

• IE 11+
• Firefox 32+
• Chrome 38+

Bundle for the Browser

Follow the package install instructions first.

npm install --save-dev browserify browserify-css
browserify myapp.js -o mybundle.js

Usage Examples

Note: This module is fully compatible with Node/Babel/ES6/ES5. Simply omit the type declarations when using a language other than TypeScript.

Cursor Override:

import {
  overrideCursor
} from 'phosphor-domutil';


// force the cursor to be 'wait' for the entire document
let override = overrideCursor('wait');

// clear the override by disposing the return value
override.dispose();

Hit Testing:

import {
  hitTest
} from 'phosphor-domutil';


let div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = '0px';
div.style.top = '0px';
div.style.width = '100px';
div.style.height = '100px';
document.body.appendChild(div);

hitTest(div, 50, 50);   // true
hitTest(div, 150, 150); // false

Box Sizing:

import {
  boxSizing
} from 'phosphor-domutil';

let div = document.createElement('div');
div.style.borderTop = 'solid 10px black';
document.body.appendChild(div);

let sizing = boxSizing(div);
sizing.borderTop;    // 10
sizing.paddingLeft;  // 0
// etc...

Size Limits:

import {
  sizeLimits
} from 'phosphor-domutil';

let div = document.createElement('div');
div.style.minWidth = '90px';
document.body.appendChild(div);

let limits = sizeLimits(div);
limits.minWidth;   // 90
limits.maxHeight;  // Infinity
// etc...

Custom Drag Data:

import {
  clearDragData, getDragData, setDragData
} from 'phosphor-domutil';


// pseudo-code
class SomeDragSource {

  evtDragStart(event: DragEvent): void {
    setDragData(event, 'application/x-my-custom-data', { foo: 12, bar: 42 });
  }

  evtDragEnd(event: DragEvent): void {
    clearDragData(event);
  }
}


// pseudo-code
class SomeDropTarget {

  evtDrop(event: DragEvent): void {
    let data = getDragData(event, 'application/x-my-custom-data');
    console.log(data);  // { foo: 12, bar: 42 }
  }
}